<template>
  <div class="page_main">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb>
    <el-card>
      <el-button type="primary" @click="$router.push('/detail')"
        >去详情页面</el-button
      >
      <LeiSlider title="项目搜索" />
      <div class="project_search">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="项目名称">
            <el-input
              v-model="form.projectName"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目编号">
            <el-input
              v-model="form.projectNo"
              placeholder="请输入项目编号"
            ></el-input>
          </el-form-item>
        </el-form>
        <LeiFooter @reset-form="resetForm" />
      </div>
      <LeiSlider title="项目列表" />
      <lei-table
        :tableData="tableData"
        :columns="columns"
        :pageObj="pageObj"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <el-table-column slot="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-button type="default">默认</el-button>
            <el-button type="primary">设置</el-button>
          </template>
        </el-table-column>
        <el-table-column slot="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="default">默认</el-button>
            <el-button type="primary">设置</el-button>
          </template>
        </el-table-column>
      </lei-table>
    </el-card>
  </div>
</template>

<script>
// import LeiAgGrid from '@/components/LeiAgGrid'
import LeiTable from '@/components/LeiTable.vue'
export default {
  // components: { LeiAgGridLeiTable },
  data() {
    return {
      activePath: {
        title: '项目管理',
        path: '',
      },
      pageObj: {
        pageNum: 1,
        pageSize: 10,
        total: 100,
      },
      tableData: [],
      columns: [
        { label: '项目编号', prop: 'name' },
        { label: '项目名称', prop: 'age' },
        { label: '项目负责人', prop: 'sex' },
        { label: '项目计划时间', prop: 'hobby' },
        { label: '项目体量', prop: 'hobby' },
        { label: '联系电话', prop: 'hobby' },
        { label: '项目地址', prop: 'hobby' },
        { slot: 'status' },
        { slot: 'operation' },
      ],
      form: {
        projectName: '',
        projectNo: '',
      },
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageObj.pageNum = 1
      console.log('页码大小发生变化', val)
    },
    handleCurrentChange(val) {
      console.log('当前页码大小发生变化', val)
    },

    // 重置
    resetForm() {
      this.form = {}
    },
  },
}
</script>